<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>搜索建议案例</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        .container {
            position: relative;
        }
        input {
            width: 300px;
            padding: 10px;
            font-size: 16px;
        }
        .suggestions {
            display: none;
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            background: #fff;
            border: 1px solid #ccc;
            max-height: 200px;
            overflow-y: auto;
            list-style: none;
            padding: 0;
            margin: 0;
            z-index: 1000;
        }
        .suggestions li {
            padding: 10px;
            cursor: pointer;
        }
        .suggestions li:hover {
            background: #f0f0f0;
        }
    </style>
</head> 
<body>
    <div class="container">
        <input type="text" id="searchInput" placeholder="请输入关键词"></input>
        <ul class="suggestions" id="suggestionsList"></ul>
    </div>
</body>
<script src="../js/axios/"></script>
<script>
    document.getElementById("searchInput").addEventListener("input", async function() {
        let keyword = this.value.trim();// 获取输入的关键词并去除空格
        if (!keyword) {
            document.getElementById("suggestionsList").style.display = "none";// 如果关键词为空，隐藏建议列表
            // document.getElementById("suggestionsList").innerHTML = "";// 清空建议列表
            return;
        }

        // 发送get请求获取建议列表
            //axios 发送的请求是异步的，我们需要使用 async 和 await 来处理异步操作
            //声明一个变量来存储请求的响应结果，解构赋值直接提取 data 属性
        let { data } = await axios({
            method:"get",
            url:'http://127.0.0.1:4000/suggestions?keyword=' + keyword,
        });

        if(data.length===0){
            // 如果返回的数组为空，隐藏建议列表
            document.getElementById("suggestionsList").style.display = "none";
        }

            data.array.forEach(suggestion => {
                
             });


        
    });
    
</script>
</html>